<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
          <template
            v-if="item.value !== ''"
            slot="facePic"
            slot-scope="{ item }"
          >
            <img
              :src="item.value"
              style="
                width: 120px;
                height: 120px;
                display: block;
                margin-left: 20px;
                cursor: pointer;
              "
              @click="handleImgPreview(item.value)"
            />
          </template>
        </t-detail>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>

    <el-dialog
      :visible.sync="imgDialogVisible"
      :title="'人脸图片'"
      top="100px"
      width="500px"
      :append-to-body="true"
    >
      <img :src="dialogImageUrl" alt="" style="padding: 20px; width: 100%" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import TDetail from '@/components/TDetail'
import dataDetailMixins from '@/mixins/data-detail-mixins'
import globalConstant from '@/utils/constants'

export default {
  name: 'PersonnelRecordsDetail',
  components: {
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      detailList: [],
      imgDialogVisible: false,
      dialogImageUrl: '',
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.detailObj = { ...this.params.item }
      this.detailList = this.getDetailList()
    },
    getDetailList() {
      const list = [
        [
          {
            text: '人脸抓拍照',
            value: this.detailObj.facePic,
            slotName: 'facePic',
          },
          {
            text: '性别',
            value: globalConstant.XBDM[this.detailObj.xbdm].text,
          },
        ],
        [
          { text: '姓名', value: this.detailObj.name },
          { text: '身份证号', value: this.detailObj.sfzh },
        ],
        [
          { text: '标签', value: this.detailObj.label },
          { text: '备注', value: this.detailObj.remark },
        ],

        [
          { text: '创建时间', value: this.detailObj.createTime },
          { text: '修改时间', value: this.detailObj.updateTime },
        ],
      ]
      return list
    },
    toClose() {
      this.$emit('close')
    },

    handleImgPreview(url) {
      this.dialogImageUrl = url
      this.imgDialogVisible = true
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}
.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}
.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}
.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}
</style>
